{% load staticfiles %}

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Home</title>

    <link href="{% static 'bootstrap3/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'bootstrap3/font-awesome/css/font-awesome.css' %}" rel="stylesheet">

    <!-- Morris -->
    <link href="{% static 'bootstrap3/css/plugins/morris/morris-0.4.3.min.css' %}" rel="stylesheet">

    <!-- Gritter -->
    <link href="{% static 'bootstrap3/js/plugins/gritter/jquery.gritter.css' %}" rel="stylesheet">

    <link href="{% static 'bootstrap3/css/animate.css' %}" rel="stylesheet">
    <link href="{% static 'bootstrap3/css/style.css' %}" rel="stylesheet">

</head>

<body>
    <div id="wrapper">
    
        <div class="gray-bg">
        <div class="row border-bottom">
        </div>
            <div class="wrapper wrapper-content">
        <div class="row">
                    <div class="col-lg-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-success pull-right">Tooling Form</span>
                                <h5>In Production</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">{{in_pro_count}}</h1>
                                <div class="stat-percent font-bold text-success">{{com_count}} <i class="fa fa-bolt"></i></div>
                                <small>Complete</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-info pull-right">Lot</span>
                                <h5>Validating</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">25</h1>
                                <div class="stat-percent font-bold text-info"></div>
                                <small><i>&nbsp;</i></small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-primary pull-right">Lot</span>
                                <h5>Pending Payment</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">12</h1>
                                <div class="stat-percent font-bold text-navy"></div>
                                <small>&nbsp;</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-danger pull-right">Lot</span>
                                <h5>In Production</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">18</h1>
                                <div class="stat-percent font-bold text-danger">86 <i class="fa fa-level-up"></i></div>
                                <small>Deliver Goods</small>
                            </div>
                        </div>
            </div>
        </div>
     

                <div class="row">
                    
                    <div class="col-lg-12">

                        <div class="row">
                            <div class="col-lg-6" style="height: 550px;">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Tooling Form List</h5>
                                        <div class="ibox-tools">
                                            <a  href="/tooling/ShowTipNoList/"> more>></a>
                                        </div>
                                    </div>
                                    <div class="ibox-content">
                                        <table class="table table-hover no-margins">
                                            <thead>
                                            <tr>
                                                <th>Tip No</th>
                                                <th>Status</th>
                                                <th>Date</th>
                                                <th>File Name</th>
                                            </tr>
                                            </thead>
                                            <tbody>
											{% for item in tooling_form_list %}	
                                            <tr>
												<td  class="text-navy">{{item.tip_no}}</td>
												
                                                <td><small>
												{% if item.check_status == 0 or item.check_status == 1 %}
												File Error
												{% endif %}
												{% if item.check_status == 2 %}
												Wait For FTP 
												{% endif %}
												
												</small></td>
                                                <td><i class="fa fa-clock-o"></i> {{item.create_date}}</td>
                                                <td> {{item.old_file_name}} </td>
                                            </tr>
											{% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
							<div class="col-lg-6">
							    <div class="ibox float-e-margins">
							        <div class="ibox-title">
							            <h5>Lot List</h5>
							            <div class="ibox-tools">
							                more>>
							            </div>
							        </div>
							        <div class="ibox-content">
							            <table class="table table-hover no-margins">
							                <thead>
							                <tr>
							                    <th>Lot ID</th>
							                    <th>Status</th>
							                    <th>Date</th>
							                    
							                </tr>
							                </thead>
							                <tbody>
											{% for item in lot_list %}	
							                <tr>
												<td  class="text-navy">{{item.tip_no}}</td>
												
							                    <td><small>
												{% if item.check_status == 0 or item.check_status == 1 %}
												File Error
												{% endif %}
												{% if item.check_status == 2 %}
												Wait For FTP 
												{% endif %}
												
												</small></td>
							                    <td><i class="fa fa-clock-o"></i> {{item.create_date}}</td>
							                    
							                </tr>
											{% endfor %}
							                </tbody>
							            </table>
							        </div>
							    </div>
							</div>
							
						</div>

                    </div>


                </div>
                </div>
        </div>
    </div>

    
    <script>
        $(document).ready(function() {
            $('.chart').easyPieChart({
                barColor: '#f8ac59',
//                scaleColor: false,
                scaleLength: 5,
                lineWidth: 4,
                size: 80
            });

            $('.chart2').easyPieChart({
                barColor: '#1c84c6',
//                scaleColor: false,
                scaleLength: 5,
                lineWidth: 4,
                size: 80
            });

            var data2 = [
                [gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
                [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
                [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
                [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
                [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
                [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
                [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
                [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
            ];

            var data3 = [
                [gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
                [gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
                [gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
                [gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
                [gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
                [gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
                [gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
                [gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
            ];


            var dataset = [
                {
                    label: "Number of orders",
                    data: data3,
                    color: "#1ab394",
                    bars: {
                        show: true,
                        align: "center",
                        barWidth: 24 * 60 * 60 * 600,
                        lineWidth:0
                    }

                }, {
                    label: "Payments",
                    data: data2,
                    yaxis: 2,
                    color: "#464f88",
                    lines: {
                        lineWidth:1,
                            show: true,
                            fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.2
                            }, {
                                opacity: 0.2
                            }]
                        }
                    },
                    splines: {
                        show: false,
                        tension: 0.6,
                        lineWidth: 1,
                        fill: 0.1
                    },
                }
            ];


            var options = {
                xaxis: {
                    mode: "time",
                    tickSize: [3, "day"],
                    tickLength: 0,
                    axisLabel: "Date",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Arial',
                    axisLabelPadding: 10,
                    color: "#d5d5d5"
                },
                yaxes: [{
                    position: "left",
                    max: 1070,
                    color: "#d5d5d5",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Arial',
                    axisLabelPadding: 3
                }, {
                    position: "right",
                    clolor: "#d5d5d5",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: ' Arial',
                    axisLabelPadding: 67
                }
                ],
                legend: {
                    noColumns: 1,
                    labelBoxBorderColor: "#000000",
                    position: "nw"
                },
                grid: {
                    hoverable: false,
                    borderWidth: 0
                }
            };

            function gd(year, month, day) {
                return new Date(year, month - 1, day).getTime();
            }

            var previousPoint = null, previousLabel = null;

            $.plot($("#flot-dashboard-chart"), dataset, options);

            var mapData = {
                "US": 298,
                "SA": 200,
                "DE": 220,
                "FR": 540,
                "CN": 120,
                "AU": 760,
                "BR": 550,
                "IN": 200,
                "GB": 120,
            };

            $('#world-map').vectorMap({
                map: 'world_mill_en',
                backgroundColor: "transparent",
                regionStyle: {
                    initial: {
                        fill: '#e4e4e4',
                        "fill-opacity": 0.9,
                        stroke: 'none',
                        "stroke-width": 0,
                        "stroke-opacity": 0
                    }
                },

                series: {
                    regions: [{
                        values: mapData,
                        scale: ["#1ab394", "#22d6b1"],
                        normalizeFunction: 'polynomial'
                    }]
                },
            });
        });
    </script>
</body>
</html>
